<template>
  <div>
    <r-search
      :searchForm="searchForm"
      :searchHandle="searchHandle"
      :searchData="searchData"
    />
    <r-table
      :tableHandles="tableHandles"
      :isSelection="false"
      :isIndex="false"
      :isPagination="true"
      :tableData="tableData"
      :tableCols="tableCols"
      :tablePage="tablePage"
      :isHandle="true"
      @refresh="init()"
    >
    </r-table>
    <!-- 编辑按钮打开的表单 -->
    <r-form
      :formRules="formRules"
      :formHandle="formHandle"
      :formData="formData"
      :formCols="formCols"
      ref="elForm"
      labelWidth="250px"
      dialogWidth="800px"
      :isHandle="true"
    />
  </div>
</template>
<script>
export default {
  data() {
    return {
      searchData: {
        name: ""
      },
      searchForm: [
        {
          type: "input",
          prop: "name",
          placeholder: "套餐名称",
          width: 180
        }
      ],
      searchHandle: [
        {
          label: "搜索",
          type: "success",
          icon: "el-icon-search",
          handle: e => this.init()
        }
      ],

      tableHandles: [
        {
          label: "新增套餐",
          type: "primary",
          handle: e => {
            this.formData.status = 1;
            this.elFormVisible();
          }
        }
      ],
      tableData: [],
      tableCols: [
        {
          label: "套餐名称",
          prop: "name"
        },
        {
          label: "天数",
          prop: "days",
          formatter: e => (e.days ? e.days + "天" : "--")
        },
        {
          label: "价格",
          prop: "price",
          formatter: e => (e.price ? e.price + "元" : "--")
        },
        {
          label: "次数",
          prop: "nums",
          formatter: e =>
            e.nums === -1 ? "不限次" : e.nums ? e.nums + "次" : "--"
        },
        {
          label: "创建时间",
          prop: "ctime"
        },
        {
          label: "是否禁用",
          prop: "status",
          type: "tag",
          formatter: e =>
            e.status == 0 ? "禁用" : e.status == 1 ? "启用" : "--",
          theme: e => (e.status == 0 ? "warning" : "primary")
        },
        {
          label: "操作",
          type: "button",
          width: 300,
          btnList: [
            {
              label: "禁用",
              type: "warning",
              size: "mini",
              handle: async row => {
                this.mealEnableFn(row.id, 0);
              },
              isShow: row => {
                return row.status == 1 ? true : false;
              }
            },
            {
              label: "启用",
              type: "success",
              size: "mini",
              handle: async row => {
                this.mealEnableFn(row.id, 1);
              },
              isShow: row => {
                return row.status == 0 ? true : false;
              }
            },
            {
              label: "编辑",
              type: "primary",
              size: "mini",
              handle: row => this.elFormDetail(row)
            },
            {
              label: "删除",
              type: "danger",
              size: "mini",
              handle: row => this.del(row)
            }
          ]
        }
      ],
      tablePage: { limit: 10, page: 1, total: 0 },
      formData: {
        id: "",
        name: "",
        price: "",
        days: "",
        nums: "",
        status: 1
      },
      formCols: [
        { type: "input", label: "套餐名称", width: 350, prop: "name" },
        {
          type: "input",
          label: "天数",
          width: 350,
          prop: "days",
          remark: "天"
        },
        {
          type: "input",
          label: "价格",
          width: 350,
          prop: "price",
          remark: "元"
        },
        {
          type: "input",
          label: "次数(次)",
          width: 350,
          prop: "nums",
          inputButton: true,
          inputButtonFn: e => {
            this.formData.nums = "无限次";
          }
        }
        // {
        //   label: "启用状态",
        //   type: "switch",
        //   prop: "status",
        //   values: [0, 1]
        //   // change: (row) => this.changeOnline(row)
        // }
      ],
      formRules: {
        name: [{ required: true, message: "请输入", trigger: "blur" }],
        days: [{ required: true, message: "请输入", trigger: "blur" }],
        price: [{ required: true, message: "请输入", trigger: "blur" }],
        nums: [{ required: true, message: "请输入", trigger: "blur" }]
      },
      formHandle: [
        {
          label: "取消",
          handle: e => this.elFormVisible()
        },
        {
          label: "确定",
          type: "success",
          handle: e => this.elFormSubmit()
        }
      ]
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    async init() {
      let parm = {
        ...this.searchData,
        ...{
          pageNum: this.tablePage.page,
          pageSize: this.tablePage.limit
        }
      };
      let res = await this.apis.mealList(parm);
      if (res) {
        this.tableData = res.rows || [];
        this.tablePage.total = res.total;
      }
    },
    // 套餐启用或禁用    1 启用 0 禁用
    async mealEnableFn(id, status) {
      let res = await this.apis.mealEnable(id, status);
      this.$message({
        type: res.code == 200 ? "success" : "error",
        message: res.msg
      });
      this.init();
    },

    // 编辑、新增--确认按钮
    async elFormSubmit() {
      this.$refs.elForm.$refs.ruleForm.validate(async valid => {
        if (valid) {
          if (this.formData.nums === "无限次") {
            this.formData.nums = -1;
          }
          var res;
          if (this.formData.id) {
            res = await this.apis.mealEdit({ ...this.formData });
          } else {
            res = await this.apis.mealSave({ ...this.formData });
          }

          this.$message({
            type: res.code == 200 ? "success" : "error",
            message: res.msg
          });
          this.init();
          this.elFormVisible();
        }
      });
    },
    // 删除
    del(row) {
      this.$confirm(`删除当前这条数据`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(async () => {
        const res = await this.apis.mealRemove(row.id);
        this.init();
        this.$message({
          type: res.code == 200 ? "success" : "error",
          message: res.msg
        });
      });
    },

    // 编辑
    elFormDetail(row) {
      Object.keys(this.formData).forEach(key => {
        this.formData[key] = row[key];
      });
      if (this.formData.nums === -1) {
        this.formData.nums = "无限次";
      }

      this.formData.id = row.id;
      this.formData.status = row.status;
      this.elFormVisible();
    }
  }
};
</script>
<style scoped lang="scss">
.el-icon-search {
  margin-right: 10px;
}

.Tip {
  margin-left: 20px;
}
</style>
